import { ResultPage, Card } from 'antd-mobile'
import {  SearchBar } from 'antd-mobile'
import { NoticeBar} from 'antd-mobile'
import { CapsuleTabs } from 'antd-mobile'
import { DownOutline } from 'antd-mobile-icons'
import axios from '../../api/http'
import { useEffect, useState, useCallback } from 'react'
import { useNavigate } from 'react-router-dom'
import Yue from '../../assets/预约挂号.png'
import ji from '../../assets/极速问诊.png'
import fu from '../../assets/复诊开房费.png'
import liveIcon from '../../assets/义诊直播.png'
import scienceIcon from '../../assets/健康科普.png'
import shopIcon from '../../assets/商城买药.png'
import adviceIcon from '../../assets/用药建议.png'
import myDoctorIcon from '../../assets/我的医生.png'

function Index() {
  const nav=useNavigate()

  type Doctor = { doctorid?: string|number; id?: string|number; doctorname?: string; name?: string; doctorimage?: string; avatar?: string; doctorstate?: string; doctortitle?: string; socoadmin?: string; doctorministre?: string; doctorcity?: string; doctorprice?: number; price?: number; rating?: number; flags?: number; views?: number }
  const [list,setlist]=useState<Doctor[]>([])
  const [activeTab,setActiveTab]=useState<string>('妇产科')
  const departments = ['妇产科','儿科','皮肤科','心血管内科','呼吸内科','消化内科','中医科','口腔科']

  const fetchDoctors = useCallback(async (admin?: string) => {
    try {
      const res = await axios.get('/doctor/list', { params: { pageCode: 1, pageSize: 10, admin } }) as unknown as { data?: Doctor[]; list?: Doctor[] } | Doctor[]
      const data = (Array.isArray(res) ? res : (res?.data || res?.list || [])) as Doctor[]
      setlist(Array.isArray(data) ? data : [])
    } catch {
      setlist([])
      
    }
  }, [])

  useEffect(()=>{ fetchDoctors(activeTab) },[activeTab, fetchDoctors])
    
  
  return (
    <div style={{width:'100vw',height:'100vh'}}>
      {/* 自定义顶部导航栏 */}
      <div style={{
        background: '#1677ff',
        padding: '16px',
        color: '#fff',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between'
      }}>
        {/* 左侧标题 */}
        <div style={{
          display: 'flex',
          flexDirection: 'column',
          gap: '2px'
        }}>
          <div style={{
            fontSize: '18px',
            fontWeight: 'bold',
            lineHeight: '1.2'
          }}>
            妙手医生 <span style={{
            fontSize: '14px',
            opacity: 0.9,
            lineHeight: '1.2'
          }}>
            妙手互联网医院
          </span>
          </div>
         
        </div>

        {/* 右侧城市选择器 */}
        <div style={{
          display: 'flex',
          alignItems: 'center',
          gap: '4px',
          cursor: 'pointer'
        }}>
          <span style={{
            fontSize: '14px',
            fontWeight: ''
          }} onClick={()=>nav('/loc')}>
            北京
          </span>
          <DownOutline style={{
            fontSize: '12px',
            color: '#fff'
          }} />
        </div>
      </div>

     <ResultPage
     status=''
      title=''
      description=''
      style={{border:'none',marginTop:'-15px'}} >
          <SearchBar placeholder='搜索医生、医院、药品、疾病症状'
          onFocus={()=>nav('/search')} style={{ overflow: 'auto',marginTop:'-50px'}}/>
              <NoticeBar style={{borderRadius:'10px'}}
              content='公告:1、自治区卫生热线250-456123789 妙手互联网热线1223-456123 2、为了更好的服务您,即日起您点击预约挂号，请务必填写真实姓名和联系方式。'
               color='alert' />
            <ResultPage.Card style={{ padding: 12 }}>
      

              {/* 三大功能入口 */}
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'center', padding:'10px 6px'}}>
                <div onClick={()=>nav('/yu')} style={{width:'33%',textAlign:'center',cursor:'pointer'}}>
                  <img src={Yue} alt="预约挂号" style={{width:'56px',height:'56px'}}/>
                  <div style={{marginTop:'6px',fontWeight:700}}>预约挂号</div>
                  <div style={{marginTop:'2px',fontSize:'12px',color:'#bfbfbf'}}>30W+专家入驻</div>
                </div>
                <div onClick={()=>nav('/ji')} style={{width:'33%',textAlign:'center',cursor:'pointer'}}>
                  <img src={ji} alt="极速问诊" style={{width:'56px',height:'56px'}}/>
                  <div style={{marginTop:'6px',fontWeight:700}}>极速问诊</div>
                  <div style={{marginTop:'2px',fontSize:'12px',color:'#bfbfbf'}}>平均3分钟接诊</div>
                </div>
                <div onClick={()=>nav('/fu')} style={{width:'33%',textAlign:'center',cursor:'pointer'}}>
                  <img src={fu} alt="复诊开方" style={{width:'56px',height:'56px'}}/>
                  <div style={{marginTop:'6px',fontWeight:700}}>复诊开方</div>
                  <div style={{marginTop:'2px',fontSize:'12px',color:'#bfbfbf'}}>慢病续方送到家</div>
                </div>
              </div>

              {/* 次级入口 */}
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'center', padding:'6px 12px 2px'}}>
                <div style={{textAlign:'center'}}>
                  <img src={myDoctorIcon} alt="问专家" style={{width:28,height:28}}/>
                  <div style={{marginTop:4,fontSize:12}}>问专家</div>
                </div>
                <div style={{textAlign:'center'}}>
                  <img src={adviceIcon} alt="开药门诊" style={{width:28,height:28}}/>
                  <div style={{marginTop:4,fontSize:12}}>开药门诊</div>
                </div>
                <div style={{textAlign:'center'}}>
                  <img src={liveIcon} alt="义诊直播" style={{width:28,height:28}}/>
                  <div style={{marginTop:4,fontSize:12}}>义诊直播</div>
                </div>
                <div style={{textAlign:'center'}}>
                  <img src={scienceIcon} alt="健康科普" style={{width:28,height:28}}/>
                  <div style={{marginTop:4,fontSize:12}}>健康科普</div>
                </div>
                <div style={{textAlign:'center'}}>
                  <img src={shopIcon} alt="商城买药" style={{width:28,height:28}}/>
                  <div style={{marginTop:4,fontSize:12}}>商城买药</div>
                </div>
              </div>
            </ResultPage.Card>

      <Card style={{ marginTop: 12 }}>
<div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
  <h2 style={{margin:0}}>我要问专家</h2>
  <span
    onClick={()=>nav('/more')}
    style={{
      display:'inline-flex',alignItems:'center',gap:'6px',
      padding:'4px 10px',
      fontSize:'12px',color:'#9e9e9e',
      background:'#f5f5f5',
      borderRadius:'999px',
      cursor:'pointer'
    }}>
      更多 <span style={{fontSize:'14px'}}>›</span>
  </span>
</div>
        <CapsuleTabs activeKey={activeTab} onChange={setActiveTab}>
          {departments.map(d => (
            <CapsuleTabs.Tab title={d} key={d} />
          ))}
        </CapsuleTabs>
    <div>
    {list && list.length>0 ? (     
     list.map((item:Doctor,index:number)=> {
        const name = item?.doctorname || item?.name || '专家';
        const avatar = item?.doctorimage || item?.avatar || 'https://via.placeholder.com/56';
        const title = item?.doctorstate || item?.doctortitle || '';
        const department = item?.socoadmin || item?.doctorministre || '';
        const city = item?.doctorcity || '';
        const price = item?.doctorprice || item?.price;
        const docId = item?.doctorid || item?.id || index;
        const rating = item?.rating ?? 100;
        const flags = item?.flags ?? 3;
        const views = item?.views ?? 12000;
        const pillTags = [department, city].filter(Boolean).slice(0,2);
        return (
          <div
            key={item.doctorid || item.id || index}
            style={{
              display:'flex',
              alignItems:'center',
              gap:'12px',
              padding:'12px 0',
              borderBottom:'1px solid #f2f2f2'
            }}
          >
            <img
              src={avatar}
              alt="avatar"
              style={{width:'56px',height:'56px',borderRadius:'50%'}}
            />
            <div style={{flex:1,minWidth:0}}>
              <div style={{display:'flex',alignItems:'center',gap:'8px'}}>
                <div style={{fontSize:'15px',fontWeight:600,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{name}</div>
                {title ? <span style={{fontSize:'12px',color:'#666'}}>{title}</span> : null}
              </div>
              {pillTags.length ? (
                <div style={{marginTop:'6px',display:'flex',gap:'6px',flexWrap:'wrap'}}>
                  {pillTags.map((t:string,i:number)=> (
                    <span key={i} style={{fontSize:'12px',color:'#1677ff',background:'#eaf3ff',padding:'2px 6px',borderRadius:'10px'}}>{t}</span>
                  ))}
                </div>
              ) : null}
              <div style={{marginTop:'8px',fontSize:'12px',color:'#999'}}>
                好评率 {rating}%  锦旗 {flags}  浏览人次 {typeof views === 'number' ? views.toLocaleString() : views}
              </div>
            </div>
            <div style={{textAlign:'right',minWidth:'80px'}}>
              <div style={{color:'#ff6b00',fontWeight:600}}>{price ? `¥${price}` : ''}</div>
              <button onClick={()=>nav(`/detail?id=${encodeURIComponent(String(docId))}`)} style={{marginTop:'6px',background:'#1677ff',color:'#fff',border:'none',borderRadius:'14px',padding:'6px 12px'}}>问医生</button>
            </div>
          </div>
        )
      })
    ) : (
      <div style={{textAlign:'center',color:'#999',padding:'20px 0'}}>暂无数据</div>    
    )}
    </div>

     <div style={{textAlign:'center'}}><a href="/more">查看此科室更多医生</a></div>
      </Card>
       
    </ResultPage>
     
    
    </div>
  )
}

export default Index